<template>
  <div class="m-content">
    <div class="m-content-search">
      <Select placeholder="请选择商品类别筛选数据" :filterable="true" :clearable="true" @on-change="changeType">
        <Option v-for="item in typeList" :value="item.id" :key="item.id">
          {{ item.name }}
        </Option>
      </Select>
      <Select placeholder="请选择操作员筛选数据" :filterable="true" :clearable="true" @on-change="changeUser">
        <Option v-for="item in userList" :value="item.username" :key="item.id">
          {{ item.name }}
        </Option>
      </Select>
    </div>
    <div class="m-content-table">
      <Table :columns="columns" :data="orderData" :loading="loading"></Table>
    </div>
    <div class="m-content-page">
      <Page
        :total="orderLen"
        :page-size="pageSize"
        :page-size-opts="[5, 10, 15]"
        :show-sizer="true"
        @on-change="changePage"
        @on-page-size-change="changePageSize"
      ></Page>
    </div>
  </div>
</template>

<script>
import {mapActions} from 'vuex'
import {columns} from './js/columns.js'

export default {
  data () {
    return {
      columns: columns(this),
      orderData: [], // 订单数据
      orderLen: 0,  // 总数据长度
      loading: false,   // 表格是否在加载中
      page: 0,   // 传递给Modal的page
      pageSize: 5,   // 页面长度
      typeList: [],   // 商品种类数据
      userList: [],   // 用户列表
    }
  },
  mounted () {
    this._getOrder()
    // this._goodsTypeInfo()
    this._UserInfo()
  },
  methods: {
    details(e) {//点击图片函数，点击后，把photoVisible设置成true
      if (e != "") {
        this.photoVisible = true;
        this.bigImgUrl = e.goodsImgUrls;
      }
    },
    // 删除订单
    deleteOrder() {

    },
    // 切换页面
    changePage(page) {
      this._getOrder(page - 1, this.pageSize)
    },
    // 修改每页页数
    changePageSize(pageSize) {
      this.pageSize = pageSize
      this._getOrder(0, pageSize)
    },
    // 筛选商品类别数据
    changeType (id) {
      this._getOrder(0, this.pageSize, id, -1)
    },
    // 筛选操作员数据
    changeUser (username) {
      this._getOrder(0, this.pageSize, -1, username)
    },
    // 获取订单数据
    async _getOrder (page, pageSize, typeId, username) {
      this.loading = true
      const url = '/sellingOrder/list'
      let pageTemp = page || 0
      let pageSizeTemp = pageSize || 5
      let TypeId = typeId || -1
      let Username = username || -1
      const res = await this.GET_DATA({
        dataUrl: url,
        size: pageSizeTemp,
        typeId: TypeId,
        page: pageTemp,
        username: Username,
        sort: 'id,desc'
      })
      if (res) {
        this.$nextTick(() => {
          this.orderData = res.data
          this.orderLen = res.pageable.totalElements
          this.loading = false
        })
      }
    },
    // 获取商品类别数据
    // async _goodsTypeInfo () {
    //   const url = '/goods/typesinfo'
    //   const res = await this.GET_DATA({
    //     dataUrl: url
    //   })
    //   if (res) {
    //     this.$nextTick(() => {
    //       this.typeList = res.data
    //     })
    //   }
    // },
    // 获取用户列表数据
    async _UserInfo() {
      const url = '/userinfo'
      const res = await this.GET_DATA({
        dataUrl: url,
        isAll: 1
      })
      if (res) {
        this.$nextTick(() => {
          this.userList = res.data.userInfo
        })
      }
    },
    ...mapActions({
      GET_DATA: '_GET_DATA'
    })
  }
}
</script>

<style>
/* .m-content-search { */
/* display: flex;
  flex-direction: column;
  flex-wrap: wrap; */
/* } */
</style>